<template>
  <div>
    <el-menu
      :default-active="onRoutes"
      router
      unique-opened
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <!--递归菜单树-->
      <Menu :menu="menu"></Menu>
    </el-menu>

  </div>
</template>

<script>
  import Menu from "./Menu";
  import menuData from "@/json/menu.json"

  export default {
    name: "MenuBar",
    components: {Menu},
    data() {
      return {
        menu: menuData
      }
    },
    computed:{
      onRoutes(){
        //当前激活菜单的 index
        return this.$route.path.replace('/', '');
      }
    }
  }
</script>

<style scoped>

</style>
